<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态滚动示例</title>
    <style>
        body {
            margin: 0;
            height: 100vh; /* 视窗高度 */
            overflow: hidden; /* 隐藏滚动条 */
        }
        .scrollable {
            height: 200px; /* 固定高度 */
            width: 300px; /* 固定宽度 */
            overflow: hidden; /* 隐藏超出部分 */
            border: 1px solid #ccc; /* 边框 */
            position: relative;
            margin: 20px auto; /* 居中 */
            background-color: #f9f9f9; /* 背景色 */
        }
        .content {
            position: absolute;
            white-space: nowrap;
            transition: transform 0.5s linear;
        }
    </style>
</head>
<body>
<div class="scrollable">
    <div class="content" id="content">
        <p>这是第一行内容。</p>
        <p>这是第二行内容。</p>
        <p>这是第三行内容。</p>
        <p>这是第四行内容。</p>
        <p>这是第6行内容。</p>
        <p>这是第7行内容。</p>
        <p>这是第8行内容。</p>
        <p>这是第9行内容。</p>
        <p>这是第五行内容。</p>
    </div>
</div>

<script>
    const content = document.getElementById('content');
    const scrollable = document.querySelector('.scrollable');

    // 检查内容高度和框高度
    function checkScroll() {
        const contentHeight = content.scrollHeight;
        const scrollableHeight = scrollable.clientHeight;

        if (contentHeight > scrollableHeight) {
            // 启动滚动
            content.style.animation = 'scroll 10s linear infinite';
        } else {
            // 不滚动
            content.style.animation = 'none';
        }
    }

    // 定义滚动动画
    document.styleSheets[0].insertRule(`
            @keyframes scroll {
                0% { transform: translateY(100%); }
                100% { transform: translateY(-100%); }
            }
        `, 0);

    // 检查并启动滚动
    checkScroll();
</script>
</body>
</html>